<template>
	<div>
		<el-select v-model="sysRegionId1" placeholder="请选择省份" filterable :style="selectStyle">
		  <el-option v-for="i in sysRegionId1List" :key="i.sysRegionId" :label="i.name" :value="i.sysRegionId"></el-option>
		</el-select>
	</div>
	<div v-show="sysRegionId2ListShow">
		<el-select v-model="sysRegionId2" placeholder="请选择城市" filterable :style="selectStyle"><!-- :style="{'width':selectWidth}"> -->
		  <el-option v-for="m in sysRegionId2List" :key="m.sysRegionId" :label="m.name" :value="m.sysRegionId"></el-option>
		</el-select>
	</div>
	<div v-show="sysRegionId3ListShow">
		<el-select v-model="sysRegionId3" placeholder="请选择区县" filterable :style="selectStyle"><!-- :style="{'width':selectWidth}"> -->
		  <el-option v-for="m in sysRegionId3List" :key="m.sysRegionId" :label="m.name" :value="m.sysRegionId"></el-option>
		</el-select>
	</div>
</template>
<script>
/** 加载企业数据 ---> 选企业项 ---》加载分公司数据
		---》1个分公司 直接触发回调
		---》>1 多个分公司 选择分公司 -- 触发回调  **/
	import sysRegionAPI from '@/api/system/sysRegion';
	export default {
		name: "SelectRegionAPI",
		props: ["parentLoadingFunction",//等待显示回调函数
				"parentGetData",//加载数据回调函数
				"selectStyle",//宽度
			],
		data() {
			return {
				sysRegionId1: null,
				sysRegionId2: null,
				sysRegionId3: null,
				sysRegionId1List: [],
				sysRegionId2List: [],
				sysRegionId3List: [],
				sysRegionId2ListShow: false,
				sysRegionId3ListShow: false,
			}
		},
		watch: {
			sysRegionId1(val){//选中省份
				if(val){
					this.getSysRegionId1Data();
				}
			},
			sysRegionId2(val){//选中城市
				if(val){
					this.getSysRegionId2Data();
				}
			},
			sysRegionId3(val){//选中区县
				if(val){
					this.getSysRegionId3Data();
				}
			},
		},
		computed: {
		},
		mounted(){
			this.toInitData();
		},
		methods: {
			async getSysRegionId1Data(){//点击省份 加载城市
				this.sysRegionId2List=[];this.sysRegionId2=null;this.sysRegionId2ListShow=true;
				this.sysRegionId3List=[];this.sysRegionId3=null;this.sysRegionId3ListShow=false;
				this.parentLoadingFunction(true);
				let reqData = {"current": 1,"size": 5000,"parentId":this.sysRegionId1};
				var res = await sysRegionAPI.sysRegion.listSelect.get(reqData);
				this.parentLoadingFunction(false);
				if(res.code === 2000){
					this.sysRegionId2List=res.data.records;
				}else{
					this.$message.warning(res.message);
				}
				this.parentGetData(res);//回调加载数据
			},
			async getSysRegionId2Data(){//点击城市 ，加载区县
				this.sysRegionId3List=[];this.sysRegionId3=null;this.sysRegionId3ListShow=true;
				this.parentLoadingFunction(true);
				let reqData = {"current": 1,"size": 5000,"parentId":this.sysRegionId2};
				var res = await sysRegionAPI.sysRegion.listSelect.get(reqData);
				this.parentLoadingFunction(false);
				if(res.code === 2000){
					this.sysRegionId3List=res.data.records;
				}else{
					this.$message.warning(res.message);
				}
				this.parentGetData(res);//回调加载数据
			},
			async getSysRegionId3Data(){//点击区县，加载街道
				this.parentLoadingFunction(true);
				let reqData = {"current": 1,"size": 5000,"parentId":this.sysRegionId3};
				var res = await sysRegionAPI.sysRegion.listSelect.get(reqData);
				this.parentLoadingFunction(false);
				this.parentGetData(res);//回调加载数据
			},
			async toInitData(resData){//初始加载省份
				this.parentLoadingFunction(true);
				let reqData = {"current": 1,"size": 5000,"parentId":0};
				var res = await sysRegionAPI.sysRegion.listSelect.get(reqData);
				this.parentLoadingFunction(false);
				if(res.code === 2000){
					this.sysRegionId1List=res.data.records;
					this.sysRegionId1ListShow=true;
				}else{
					this.$message.warning(res.message);
				}
				this.parentGetData(res);//回调加载数据
			},
		}
	}
</script>
